<template>

	<view class="page-bg">
		<u-navbar :autoBack="true" :border="false" :placeholder="true">
			<view slot="center" class="fb c3 f16">
				接单记录
			</view>
		</u-navbar>

		<scroll-view :scroll-top="scrollTop" :style="{height:scrollerHeight}" scroll-y
			@scrolltolower="onreachBottom">
			<view class="recycle-bg mt10" >
				<view v-for="item,index in allOrder" :key="index">
						<view class="order-item p10 mt10">
							<view class="f-s-b">
								<view class="c3 fb f16">{{item.orderNo}}</view>
								<view class="cr">{{status[item.status]}}</view>
							</view>
							<view class="divider-line mt10 mb10" />
							<view class="f">
								<view class="f">
									<image src="../../static/order/timer-order.svg" style="width: 20px; height: 20px;">
									</image>
									<view class="f16 fb c3 ml10">{{item.createTime}}</view>
								</view>
								<view class="f ml20">
									<image src="../../static/order/user-order.svg" style="width: 20px; height: 20px;">
									</image>
									<view class="f16 fb c3 ml10">{{item.contactor}}</view>
								</view>
							</view>
				
							<view class="f14 c6 mt10">
								<view class="f">
									<view>
										预约地址：
									</view>
									<view class="ml5">
										{{item.province+item.city+item.county+item.address}}
									</view>
								</view>
								<view class="f">
									<view>
										物品估重：
									</view>
									<view class="ml5">
										{{item.expectWeightTal}} kg
									</view>
								</view>
								<view class="f">
									<view>
										预估金额：
									</view>
									<view class="ml5">
										¥ {{item.expectAmountTal}}
									</view>
								</view>
								<view class="f">
									<view>
										预约开始时间：
									</view>
									<view class="ml5">
										{{item.startTime}}
									</view>
								</view>
								<view class="f">
									<view>
										预约结束时间：
									</view>
									<view class="ml5">
										{{item.endTime}}
									</view>
								</view>
				
							</view>
							
						</view>
				
					</view>
				
				</view>
			<view class="f-f-c-c" v-show="allOrder.length==0">
				<image src="../../static/no-data.svg"></image>
				<view>暂无记录</view>
			</view>		
		</scroll-view>

	</view>
</template>

<script>
	export default {
		props: {},
		data() {
			return {
				allOrder: [],
				params: {
					pageNum: 1,
					pageSize: 10,
					status: '-1',
				},
				scrollerHeight: 0,
				swiperContentHeight: 0,
				scrollTop: 9999,
				ismore : true,
				status: ['待接单', '用户取消', '待服务', '', '服务中', '成功-待评价', '已完成', '服务失败-待评价', '服务失败', '超时结束'],
			}
		},
		onReady() {},
		onLoad() {
			
			this.requestOrder();
			this.getScollHeight();
		},
		methods: {
			onreachBottom() {
				if (this.ismore) {
					this.params.pageNum += 1
					this.requestOrder()
				}
			},
			// 设置scoll高度
			getScollHeight() {
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						let windowHeight = res.windowHeight;
						that.swiperContentHeight = (windowHeight - 100) + 'px';
						that.scrollerHeight = (windowHeight - 20) + 'px'; // 给15px的底部间距然后还要减掉搜索位置高度
					}
				});
			},
			requestOrder() {
				let that = this
				that.request("get", "riderAppOrder/app/getOrderPageList", uni.getStorageSync('token'), that.params).then(
					res => {
						console.log(res)
						if (res.code === 200) {
							if (that.params.pageNum == 1) {
								this.ismore = true
								that.allOrder = []
								that.allOrder = res.rows
							} else {
								that.allOrder = [...that.allOrder, ...res.rows]
							}
							if (res.rows.length < 10) {
								that.ismore = false
							} else {
								that.ismore = true
							}

						}
					})
			},

		}
	};
</script>

<style scoped lang="scss">
	.search-box {
		height: 32px;
		background: #FAFAFB;
		border-radius: 20px 20px 20px 20px;
		opacity: 1;
	}

	.recycle-bg {
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
	}
	.order-item {
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
	}
	
	.current-status-icon {
		width: 10px;
		height: 10px;
		background-color: #1AC388;
		border-radius: 10px;
	}
	
	.status-icon {
		width: 10px;
		height: 10px;
		background-color: #999999;
		border-radius: 10px;
	}
	
	.navigation-bg {
		width: 65px;
		height: 26px;
		background: rgba(26, 195, 136, 0);
		border-radius: 13px 13px 13px 13px;
		opacity: 1;
		border: 1px solid #1AC388;
	}
	
	.confirm-bg {
		width: 90px;
		height: 34px;
		margin-left: 10px;
		background: #1AC388;
		border-radius: 17px 17px 17px 17px;
		opacity: 1;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #1AC388;
	}
	
	.unConfirm-bg {
		margin-left: 10px;
		width: 90px;
		height: 34px;
		background: rgba(26, 195, 136, 0);
		border-radius: 17px 17px 17px 17px;
		opacity: 1;
		color: #1AC388;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #1AC388;
	}
	
	.phone-bg {
		width: calc(100vw - 80px);
		margin: 0 auto;
		padding: 20px;
		background: #FFFFFF;
		border-radius: 17px 17px 17px 17px;
		color: #1AC388;
	}
</style>